import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function IndustryDistribution({ data = {} }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!data.list) return;
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      title: { text: '', left: 'center' },
      center: ['30%', '50%'],
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#fff' } },
      series: [
        {
          name: '产业分布',
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          label: { show: true, color: '#fff', fontSize: 12, formatter: '{b}:{c}' },
          labelLine: { show: true, length: 10, length2: 10 },
          data: data.list
        }
      ]
    });
    return () => chart.dispose();
  }, [data]);

  return (
    <div style={{ width: '100%', height: 300 }}>
      <div style={{ color: '#00eaff', fontWeight: 700, fontSize: 16, marginBottom: 8 }}>园区产业分布</div>
      <div ref={chartRef} style={{ width: '100%', height: 250 }} />
    </div>
  );
} 